<slot>

以下の2つがある

slot要素

<slot name=".."></slot>

slot属性

<div slot="..">..</div>

Custom Elementを使用する時に使う

Custom Elementで囲う

code:html

<custom>

<span slot="label">my button</span>

</custom>

slotってタグじゃないんか

タグと、属性がある

code:html

<my-button>

<span slot="label">my button</span>

</my-button>

code:custom_element.js

<button type="button">

<slot name="label" />

</button>

Reactで書くとこんなイメージ

code:jsx

<MyButton

label={() => <span>my button</span>}

code:jsx

const MyButton = () => {

return (

<button type="button">

{label}

</button>

)

}

children的な、そうでもないような、よくわかん

code:js

<button type="button">

<span>

<slot name="hoge" />

<slot name="piyo" />

</span>

</button>